<template>
  <div class="weui-uploader">
    <div class="weui-uploader__hd">
      <p class="weui-uploader__title">{{title}}</p>
      <div class="weui-uploader__info">0/2</div>
    </div>
    <div class="weui-uploader__bd">
      <ul class="weui-uploader__files">
        <li v-for="item in list" :class="['weui-uploader__file', {'weui-uploader__file_status':!!item.content}]">
          <div class="weui-uploader__file-content" v-if="!!item.content">
            {{item.content}}
          </div>
        </li>
        <!--<li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(./images/pic_160.png)">
          <div class="weui-uploader__file-content">
            <i class="weui-icon-warn"></i>
          </div>
        </li>-->
      </ul>
      <div class="weui-uploader__input-box">
        <input class="weui-uploader__input" type="file" :accept="accept" :name="name" multiple @change="on_change"/>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      title: {
        type: String,
        default: ''
      },
      name: {
        type: String,
        default: 'files'
      },
      accept: {
        type: String,
        default: '*/*'
      },
      list: Array
    },
    methods: {
      on_change(e) {
        var src,
          url = window.URL || window.webkitURL || window.mozURL,
          files = []
        for (var i = 0; i < e.target.files.length; i++) {
          if (url) {
            src = url.createObjectURL(e.target.files[i])
          } else {
            src = e.target.result
          }
          files.push(src)
        }
        this.$emit('on-change', files)
      }
    }
  }
</script>

<style>
  @import 'weui/dist/style/weui.min.css';
</style>
